<!--
 * @Description: 初学vue
 * @Author: zzj
 * @Date: 2021-09-26 09:28:09
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-26 14:41:18
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>hello vue</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
</head>
<body>
	<!-- 容器，承载虚拟dom节点 -->
	<div id="app">
		<div>{{msg}}</div>
		<my-info></my-info>
		<my-info></my-info>
	</div>

	<script>
		//组件:复用  保证data不共享
		let MyInfo = {
			template:`
				<div class="info">
					<h2>提示框</h2>
					<div>{{name}}</div>
				</div>
			`,
			data(){   //工厂函数模式
				return {
					name:"hello info"
				}	
			}
		}


		//根组件：data可以为对象？只有一个根，data中数据不会被共享
		let vm = new Vue({
			el:"#app",
			components:{
				"my-info":MyInfo
			},
			data:{
				msg:"hello vue",
				list:[{
					id:1,
					name:"terry",
					age:12
				}, {
						id: 2,
						name: "larry",
						age: 11
					}]
			}
		});

		
	</script>

</body>
</html>